<template>
	<view class="hb-qrcode-wrapper">
		<!-- #ifdef APP-PLUS || H5 -->
		<canvas canvas-id="qrcanvas" class="qrcode-canvas" :data-width="canvasWidth" :data-height="canvasWidth" :style="{width:canvasWidth+'px', height:canvasWidth+'px'}"></canvas>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<canvas canvas-id="qrcanvas" id="qrcanvas" class="qrcode-canvas" :style="{width:canvasWidth+'px', height:canvasWidth+'px'}"></canvas>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		qrCode
	} from "@/utils/libs/qr-bar/index"
	export default {
		name: "qrcode",
		props: {
			config: {
				type: Object,
				default () {
					return {
						width: 420,
						height: 420,
						code: ""
					}
				}
			}
		},
		data() {
			return {
				start: false,
				canvasWidth: 420
			}
		},
		created() {
			let that = this;
			this.canvasWidth = this.getCanvasView(that.config.width)
			console.log("this.config", this.config)
			this.$nextTick(() => {
				qrCode('qrcanvas', that, that.config.code, that.config.width, that.config.height);
			})
		},

		methods: {
			getCanvasView(length) {
				return Math.round(uni.getSystemInfoSync().windowWidth * length / 750);
			}
		}
	}
</script>

<style>
	.qrcanvas {
		margin: auto;
		background-color: #fff;
	}
</style>
